<template>
  <!--历史版本-->
  <div v-loading="historicalFileLoading" class="list-table">
    <el-form
      ref="queryForm"
      :model="versionParams"
      :inline="true"
    >
      <el-form-item :label="$t('编辑时间')">
        <DatePicker
          v-model="versionDateRange"
          type="daterange"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="versionQueryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="versionResetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="fileEditHistoryList" border>
      <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
        <template slot-scope="scope">
          {{ (versionParams.pageNum - 1) * versionParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('编号')" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.numbering" placement="right-end">
            <span>{{ $t(scope.row.numbering) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column :label="$t('名称')" align="center">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.name" placement="right-end" effect="right-end">
            <el-link @click="onlinePreviewOnlineEdit('view', scope.row)">
              <el-tooltip :content="scope.row.name" placement="right-end">
                <span style="color: #1890ff;">{{ $t(scope.row.name) }}</span>
              </el-tooltip>
            </el-link>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column :label="$t('时间')" align="center" prop="editTime">
        <template slot-scope="scope">
          <span>{{ renderTime(scope.row.editTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('用户')" align="center" prop="nickName" />
      <el-table-column v-if="configDownloadEnabled" :label="$t('操作')" align="center" width="100">
        <template slot-scope="scope">
          <el-button size="small" type="text" icon="el-icon-refresh-right" @click="recoverFile(scope.row)" />
          <el-button size="small" type="text" icon="el-icon-download" @click="download(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="versionTotal>0"
      :total="versionTotal"
      :page.sync="versionParams.pageNum"
      :limit.sync="versionParams.pageSize"
      @pagination="initVersion"
    />
    <!--  在线预览  -->
    <div v-loading="viewLoading">
      <el-dialog
        v-el-drag-dialog
        :visible.sync="previewOpen"
        custom-class="previewDialog"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        append-to-body
      >
        <iframe
          :src="url"
          width="100%"
          height="100%"
          frameborder="no"
          border="0"
          append-to-body
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { listFileEditHistory, versionRestoreFile } from '@/api/file/onlineEditing/fileEditHistory'
import config from '@/utils/config'
import { getToken } from '@/utils/auth'
import { downLoadFile } from '@/utils/zipdownload'
export default {
  data() {
    return {
      url: '',
      historicalFileLoading: false,
      viewLoading: false,
      previewOpen: false,
      versionTotal: 0,
      versionParams: {
        originalFileId: undefined,
        pageNum: 1,
        pageSize: 10
      },
      fileEditHistoryList: [],
      versionDateRange: [],
      fileDirId: '',
      // 全局下载开关
      configDownloadEnabled: true
    }
  },
  created() {
    this.initVersion()
    // 全局下载开关
    this.getConfigKeyToDownload('enable_download').then(response => {
      this.configDownloadEnabled = (response.msg === 'true')
    })
  },
  methods: {
    initVersion() {
      this.historicalFileLoading = true
      this.versionParams.originalFileId = this.fileDirId
      this.versionParams.beginTime = this.versionDateRange[0]
      this.versionParams.endTime = this.versionDateRange[1]
      listFileEditHistory(this.versionParams).then(response => {
        this.fileEditHistoryList = response.rows
        this.versionTotal = response.total
        this.historicalFileLoading = false
      })
    },
    versionResetQuery() {
      this.versionDateRange = []
      this.resetForm('queryForm')
      this.versionQueryHandle()
    },
    versionQueryHandle() {
      this.versionParams.pageNum = 1
      this.initVersion(this.fileDirId)
    },
    renderTime(date) {
      var dateee = new Date(date).toJSON()
      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },
    // 预览历史文件
    onlinePreviewOnlineEdit(type, row) {
      this.previewOpen = true
      this.viewLoading = false
      this.url = config.baseURL + '/historicalVersionFile?id=' + row.id + '&Authorization=' + getToken() + '&onlineEditType=' + type + '&suffix=' + row.name.substring(row.name.lastIndexOf('.') + 1)
    },
    download(row) {
      downLoadFile('/history/fileEditHistory/download?id=' + row.id)
    },
    // 还原成最新文件
    recoverFile(row) {
      console.log(row)
      var _this = this
      this.$confirm(this.$t('将当前文件还原成最新版本显示'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(() => {
        _this.historicalFileLoading = true
        return versionRestoreFile(row.id).then(response => {
          console.log('还原结果', response)
          _this.historicalFileLoading = false
          if (response.data !== null) {
            _this.msgSuccess(_this.$t('版本还原成功!'))
            _this.$emit('close', '')
            _this.$emit('refreshFileInfo', { newId: response.data.id, newName: response.data.name, oldId: this.fileDirId })
          }
        }).catch(() => {
          _this.historicalFileLoading = false
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped>

</style>
